<html xmlns="http://www.w3.org/1999/xhtml"  wicket:id="calendarBorder" >
	<head></head>
	<div wicket:id="user-status" id="user-status">
		Hello, some_person | <a href="#">Account</a> | <a href="#">Sign out</a>
	</div>
		
	<div id="crud-nav">
		<ul>
			<li><a href="#" wicket:id="viewCalendars">View Calendars</a></li> |
			<li><a href="#" wicket:id="createCalendar">Create Calendar</a></li> |
			<li><a href="#" wicket:id="createEvent">Create Event</a></li> |
			<li><a href="#" wicket:id="editCalendar">Edit Calendar</a></li> |
			<li><a href="#" wicket:id="editEvent">Edit Event</a></li> |
			<li><a href="#" wicket:id="shareCalendar">Share Calendar</a></li> |
			<li><a href="#" wicket:id="shareEvent">Share Event</a></li>
		</ul>
	</div>
	<h1>Edit an Event</h1>
	<h2>Error! The new end date is before the start date.</h2>
    <form wicket:id="form">
   		<label>Event:</label>
   		<select wicket:id="selectedEvent"></select>
   		
   		<p></p>
   		
   		<label>Event Name:</label>
        <input id="inputNameField" class="title" type="text" wicket:id="inputNameField" value="" size="50" />
   		
   		<p></p>
   		
   		<label>Calendar:</label>
   		<select wicket:id="selectedCalendar"></select>
   		<p></p>  
        
        <!--  START DATE  -->
        <fieldset class="round half">
        	<legend>When does it start?</legend>
        	
        		<label >Start date:</label>
	        	<input id="startDate" class="title" type="text" wicket:id="startDate" value="" size="" />
        		<label >Start time:</label>
	        	<input id="startTime" class="title" type="text" wicket:id="startTime" value="" size="" />
	        <script type="text/javascript">
				$(function(){
					$('#startTime').timepickr({convention: 24});
			        $("#startDate").datepicker();
		        });
			</script>
        </fieldset>

        <p></p>
        
        <!--  END DATE  -->
        <fieldset class="round half">
        	<legend>When does it end?</legend>  
        	
        	<label >End date:</label>
        	<input id="endDate" class="title" type="text" wicket:id="endDate" value="" size="" />
        	
        	<label >End time:</label>
        	<input id="endTime" class="title" type="text" wicket:id="endTime" value="" size="" />
        	<script type="text/javascript">
				$(function(){
					$('#endTime').timepickr();
			        $("#endDate").datepicker();
		        });
			</script>
        </fieldset>      

        <div class="clear"></div>
        
        <label >Event Description:</label>
        <div class="clear"></div>
        <textarea  class="span-12" wicket:id="inputDescriptionArea" rows="5" ></textarea>
        
        <div class="clear"></div>
        <input type="submit" value="Edit Event" />
        
     
    </form>
</html>